<template>
  <view class="container">
    <view class="form-container">
      <picker
        mode="selector"
        :range="deviceTypes"
        :value="selectedDeviceTypeIndex"
        @change="handleDeviceTypeChange"
      >
        <view class="input-label">选择设备类型</view>
        <view class="selected-value">{{ selectedDeviceType }}</view>
      </picker>
      <input v-model="name" type="text" placeholder="输入设备名称" class="text-input" />
      <switch v-model="switchStatus"></switch>
	  <input v-model="openCommand" type="text" placeholder="输入开启设备指令" class="text-input" />
	  <input v-model="closeCommand" type="text" placeholder="输入关闭设备指令" class="text-input" />
      <button @tap="editDevice" class="edit-button">修改设备</button>
      <button @tap="closeModal" class="edit-button">返回页面</button>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    deviceData: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      deviceTypes: ['设备类型1', '设备类型2', '设备类型3'],
      selectedDeviceTypeIndex: 0,
      name: '',
      switchStatus: false,
	  openCommand: '', // Store the value of the open command input
	  closeCommand: '', // Store the value of the close command input
    };
  },
  created() {
    // 当接收到父组件传递的设备数据时，将设备数据填充到表单字段中
    if (this.deviceData) {
      this.selectedDeviceTypeIndex = this.deviceTypes.indexOf(
        this.deviceData.type
      );
      this.name = this.deviceData.name;
      this.switchStatus = this.deviceData.switchStatus;
    }
  },
  methods: {
    handleDeviceTypeChange(event) {
      this.selectedDeviceTypeIndex = event.detail.value;
    },
    editDevice() {
      // 构造要发送的数据
      const editedDeviceData = {
        id: this.deviceData.id,
        type: this.deviceTypes[this.selectedDeviceTypeIndex],
        name: this.name,
        switchStatus: this.switchStatus,
		openCommand: this.openCommand,
		closeCommand: this.closeCommand,
      };

      // 发送数据到后端进行设备修改操作
      uni.request({
        url: 'http://localhost:7777/devices/update', // 后端接口的URL，用于修改设备数据
        method: 'PUT', // 使用POST方法发送数据
        data: editedDeviceData, // 要发送的数据
        header: {
          'Content-Type': 'application/json', // 根据后端接口要求设置合适的Content-Type
        },
        success: (res) => {
          console.log('Device edited successfully:', res.data);
          // 在修改成功后，你可以根据后端返回的响应进行相应处理
          // 例如更新视图，显示成功提示等
		   const OpenCommandData = {
				  type: "open",
		          deviceId: this.deviceData.id,
		          sendOrder: this.openCommand,
		        };
			uni.request({
				url: 'http://localhost:7777/commands/update', // 第二个后端路由的URL
				method: 'PUT', // 使用PUT方法发送数据
				data: OpenCommandData, // 要发送的数据
				header: {
				  'Content-Type': 'application/json', // 根据后端接口要求设置合适的Content-Type
				},
				success: (res) => {
				  console.log('OpenCommands updated successfully:', res.data);
				  // 在第二个后端路由执行成功后，你可以根据后端返回的响应进行相应处理
				  const CloseCommandData = {
						 type: "close",
						 deviceId: this.deviceData.id,
						 sendOrder: this.closeCommand,
					   };
					uni.request({
						url: 'http://localhost:7777/commands/update', // 第二个后端路由的URL
								method: 'PUT', // 使用PUT方法发送数据
								data: CloseCommandData, // 要发送的数据
								header: {
								  'Content-Type': 'application/json', // 根据后端接口要求设置合适的Content-Type
								},
								success: (res) => {
									console.log('CloseCommands updated successfully:', res.data);
								},
								fail: (error) => {
									console.log('失败');
								},
					});
				},
				fail: (error) => {
					console.log('失败');
				},
			})
          this.$emit('close'); // 关闭子组件
        },
        fail: (error) => {
          console.error('Failed to edit device:', error);
          // 这里可以处理修改设备失败的情况
        },
      });
    },
    closeModal() {
      this.$emit('close'); // 关闭子组件
    },
  },
};
</script>

<style>
.container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0); /* 设置背景为半透明灰色 */
  z-index: 9999; /* 设置层级，确保组件显示在页面最顶层 */
}

.form-container {
  width: 80%;
  margin-top: 20px;
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.input-label {
  font-size: 16px;
  margin-bottom: 5px;
}

.selected-value {
  font-size: 20px;
  color: #007aff;
}

.text-input {
  width: 90%;
  height: 40px;
  margin: 10px;
  padding: 0 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
}

.edit-button {
  width: 100%;
  height: 40px;
  margin-top: 20px;
  font-size: 16px;
  background-color: #007aff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>
